<template>
  <div class="renohome-right-nav flex-row flex-justify-b">
    <div class="flex-col flex-grow-1">
      <div class="flex-row flex-align-c flex-justify-b">
        <!-- {{custormItemData.name}} -->
        <div class="renohome-right-nav-title">{{custormItemData.name}}</div>
        <div v-if="isPostor">组件宽度: {{custormItemData.style.width}} 高度: {{custormItemData.style.height}}</div>
      </div>
      <div v-if="isPostor"><span class="text-danger" style="display: inline-block;">(若使用图片类型组件并且边角样式为圆角、圆形，务必上传宽高比为1:1的图片,可在上传时使用裁剪模式对原图修改)</span></div>
    </div>
    <div
      class="flex-row flex-align-c renohome-right-nav-list"
      v-if="showChange === '1'"
    >
    <div
        class="renohome-right-nav-item"
        v-bind:class="{active:tiActive}"
        @click="change('title')"
        v-if="custormItemData.name=='单列商品' && custormItemData.style.display !='1-1'"
      >标题
      </div>
      <div
        class="renohome-right-nav-item"
        v-bind:class="{active:nrActive}"
        @click="change('count')"
      >内容
      </div>
      <div
        class="renohome-right-nav-item"
        v-bind:class="{active:fgActive}"
        @click="change('style')"
      >风格
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    custormItemData: Object,
    isPostor: Boolean,
    showChange: {
      type: String,
      default: '2'
    }
  },
  components: {},
  data() {
    return {
      nrActive: true,
      fgActive: false,
      tiActive: false
    }
  },
  computed: {},
  watch: {},
  methods: {
    rightNavChange(e) {
      console.log('111111111111111111', e)
      if (e === 'count') {
        this.nrActive = true
        this.fgActive = false
        this.tiActive = false
      } else if (e === 'title') {
        this.nrActive = false
        this.fgActive = false
        this.tiActive = true
      } else {
        this.nrActive = false
        this.fgActive = true
        this.tiActive = false
      }
    },
    change(e) {
      console.log('ddddddddddddddddddddddddddddd', e)
      this.rightNavChange(e)
      this.$emit('rightNavChange', e)
    }
  }
}
</script>

<style>
</style>
